<template>
  <div class="jingdian">
    <ul>
      <li v-for="i in jingdian" :key="i.id">
        <div class="i_img"><img :src="i.img"/></div>
        <div class="i_text">
          <div class="i_nm"><b>{{ i.nm }}</b>
            <div class="pf" v-show="i.sc==0"><span class="zwpf">暂无评分</span></div>
            <div class="pf" v-show="i.sc!=0"><span class="fen">{{ i.sc }}</span>分</div>
          </div>
          <div class="i_enm">{{ i.enm }}</div>
          <div class="i_cat">{{ i.cat }}</div>
          <div class="i_pubDesc">{{ i.pubDesc }}</div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "jingdian",
  data() {
    return {
      jingdian: [],
    };
  },
  mounted() {
    axios.get("/ajax/moreClassicList?sortId=1&showType=3&limit=10&offset=10&optimus_uuid=9BA9AB0058DC11ECB1C947800CAEB4EAAEB69D36B3D5460182908BF308DD6643&optimus_risk_level=71&optimus_code=10").then((res) => {
      console.log(res);
      this.jingdian = res.data.classicMovies.list;
    })
  },
}
</script>

<style scoped>
.jingdian {
  display: flex;
  justify-content: space-around;
}

img {
  width: 100%;
}

.i_img {
  width: 21%;
  margin-left: 20px;
}

.jingdian li {
  width: 100%;
  display: flex;
  flex-direction: row;
  padding: 0.267rem 0 0.267rem 0;
  text-align: left;
}

.i_text {
  width: 70%;
  padding-left: 0.267rem;
  margin-right: 0.267rem;
}

.i_nm b {
  font-size: 0.453rem;
  color: #333;
  font-weight: 700;
}

.pf {
  float: right;
}

.i_nm, .i_enm, .i_cat, .i_pubDesc {
  font-size: 15px;
  padding-bottom: 10px;
}
.i_enm, .i_cat, .i_pubDesc{
  color: #999;
}
.i_enm{
  width: 70%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.zwpf{
  width: 1.28rem;
  font-size: .24rem;
  color: #999;
}
.fen{
  color: #faaf00;
  font-size: 0.48rem;
}
</style>